<template>
    <div class="app-container">
        <el-row :gutter="40">
            <el-col :span="7">
                <div class="title">字典导航</div>
                <Group ref="group" :data="treeData" :action="true" :draggable="false" :highlightCurrent="true"
                    :filter="true" :title="false" @handleNodeClick="handleNodeClick" @addNode="addNode"
                    @removeNode="removeNode" />
            </el-col>
            <el-col :span="17" class="form-container">
                <div class="title">字典属性</div>
                <elDialogForm :hasDialog="false" :items="items" :form="form" @submit="onSubmit">
                    <div slot="datePicker">
                        <el-date-picker v-model="form.datePicker" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </div>
                </elDialogForm>
            </el-col>
        </el-row>
        <!-- <div v-for="item in 50">{{item}}</div> -->
    </div>
</template>

<script>
import Group from '@/components/Group/group'
import elDialogForm from '@/components/el-dialog-form/index'
export default {
    components: {
        Group,
        elDialogForm
    },
    data() {
        return {
            treeData: [{
                id: 1,
                name: '一级 1',
                children: [{
                    id: 4,
                    name: '二级 1-1',
                    children: [{
                        id: 9,
                        name: '三级 1-1-1'
                    }, {
                        id: 10,
                        name: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                name: '一级 2',
                children: [{
                    id: 5,
                    name: '二级 2-1'
                }, {
                    id: 6,
                    name: '二级 2-2'
                }]
            }, {
                id: 3,
                name: '一级 3',
                children: [{
                    id: 7,
                    name: '二级 3-1'
                }, {
                    id: 8,
                    name: '二级 3-2'
                }]
            }],
            dialog: true,
            form: {
                parentName: '',
                zdmc: '',
                zddm: '',
                zdms: '',
                zdpx: 0,
                status: true
            },
            items: [
                {
                    type: 'input',
                    label: '父节点名称',
                    prop: 'parentName',
                    hidden: false,
                    disabled: true,
                    attrs: { placeholder: '父节点名称' },
                },
                {
                    type: 'input',
                    label: '字典名称',
                    prop: 'zdmc',
                    rules: [{
                        required: true,
                        message: "请输入字典名称",
                        trigger: 'blur'
                    }],
                    attrs: {
                        placeholder: '请输入字典名称'
                    },
                },
                {
                    type: 'input',
                    label: '字典代码',
                    prop: 'zddm',
                    rules: [{
                        required: true,
                        message: "请输入字典代码",
                        trigger: 'blur'
                    }],
                    attrs: {
                        placeholder: '请输入字典代码'
                    },
                },
                {
                    type: 'input',
                    label: '字典描述',
                    prop: 'zdms',
                    attrs: {
                        placeholder: '请输入字典描述'
                    },
                },
                {
                    type: 'input-number',
                    label: '字典排序',
                    prop: 'zdpx',
                },
                {
                    type: 'switch',
                    label: '启用状态',
                    prop: 'status',
                },
            ]
        }
    },
    created() {
    },
    methods: {
        handleNodeClick(v) {
            console.log('点击tree节点', v,)
            let top = v.node.parent.parent ? false : true
            console.log('top', top)
            if (top) {
                this.form.parentName = '顶级'
            } else {
                this.form.parentName = v.node.parent.data.name
            }
            // this.form.id = v.node.parent.date.id  // 编辑时需要id值
            // this.form.zdmc = v.node.parent.date.zdmc
        },
        addNode(v) {
            console.log('新增tree节点', v,)
            this.resetForm()
            if (v.top) {
                this.form.parentName = '顶级'
            } else {
                this.form.parentName = v.data.name
            }
        },
        removeNode(v) {
            console.log('删除tree节点', v,)
        },
        resetForm() {   
            this.form = {
                parentName: '',
                zdmc: '',
                zddm: '',
                zdms: '',
                zdpx: 0,
                status: true
            }
        },
        onSubmit(form) {
            console.log(form);
        },
    }
}
</script>

<style lang="scss" scoped>
.form-container {
    width: 800px;
}
.title{
    font-size: 20px;
    font-weight: bold;
    // background-color: darkgrey;
    padding: 10px 0px;
    margin-bottom: 10px;
}
</style>